<template>
  <div class="countcroller">
    <div v-show="food.count>0" class="decrease" @click="ondecrease">
      <span class="inner icon-remove_circle_outline"></span>
    </div>
    <div v-show="food.count>0" class="count">{{food.count}}</div>
    <div @click='onadd' class="add icon-add_circle"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      food: {
        type: Object
      }
    },
    methods: {
      onadd() {
        if (!this.food.count) {
          this.$set(this.food, 'count', 1);
        } else {
          this.food.count++;
        }
      },
      ondecrease() {
        this.food.count--;
      }
    }
  };
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .countcroller
    font-size 18px
    color rgb(0, 160, 220)
    line-height 18px
    .decrease
      display inline-block
    .count
      display inline-block
      padding 0 7px
    .add
      display inline-block
</style>
